<template>
  <div class="main-content">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in activityList" :key="item.id">
          <div
            style="margin-bottom: 10px; position: relative; cursor: pointer"
            @click="pushClk(item)"
          >
            <div style="position: absolute; top: 5px; left: 0">
              <el-tag
                type="danger"
                effect="dark"
                v-if="item.status === '已结束'"
                >已结束</el-tag
              >
              <el-tag
                type="success"
                effect="dark"
                v-if="item.status === '未报名' || item.status === '已报名'"
                >进行中</el-tag
              >
              <el-tag effect="dark" v-if="item.status === '未开始'"
                >未开始</el-tag
              >
            </div>
            <img
              :src="item.cover"
              alt=""
              style="
                width: 100%;
                height: 170px;
                display: block;
                border-radius: 5px 5px 0 0;
              "
            />
            <div
              style="
                padding: 10px;
                background-color: #fff;
                box-shadow: -3px 3px 3px -2px rgba(0, 0, 0, 0.1),
                  3px 3px 3px -2px rgba(0, 0, 0, 0.1);
              "
            >
              <div class="line2" style="height: 40px; margin-bottom: 5px">
                {{ item.name }}
              </div>
              <div style="font-size: 13px; color: #666">
                {{ item.start }} ~ {{ item.end }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin: 10px 0" v-if="total">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { userJwt } from "@/utils/request";
import dayjs from "dayjs";
export default {
  name: "FrontActivity",
  data() {
    return {
      activityList: [],
      pageNum: 1,
      pageSize: 8,
      total: 0,
    };
  },
  created() {
    this.load(1);
  },
  methods: {
    load(pageNum) {
      // 分页查询
      if (pageNum) this.pageNum = pageNum;
      this.$request
        .get("/activity/selectPage", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name,
          },
        })
        .then((res) => {
          this.activityList = res.data?.list.map((mv) => {
            let start = dayjs(mv.start);
            let end = dayjs(mv.end);
            let current = dayjs();
            mv.status =
              current < start
                ? "未开始"
                : current > end
                ? "已结束"
                : mv.status === "已报名"
                ? mv.status
                : "未报名";
            return mv;
          });
          this.total = res.data?.total;
        });
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum);
    },
    pushClk(item) {
      this.$router.push("/front/activityDetail?id=" + item.id);
    },
  },
};
</script>

<style scoped></style>
